<template>
    <div>
        <div class="login">
            <div class="log">
                <img :src="systemData.pic" alt=""/>
                <div class="logi">
                    <p class="p1">{{ systemData.brandname }}</p>
                    <p class="p2">{{ systemData.Advertisement }}</p>
                </div>
            </div>
            <div class="inmn">
                <div class="item ste">
                    <p class="p2 fullp">中国大陆</p>
                </div>
                <div class="item ste">
                    <p class="p2 l">+86</p>
                    <div style="width: 2px;height: 100%;background: #f5f5f5"></div>
                    <input
                            placeholder="请输入手机号码"
                            v-model="phone"
                            class="full1"
                            type="number"
                            pattern="[0-9]*"
                            onkeypress="return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )"
                    />
                    <div class="statecss" v-show="statephone">
                        <p v-text="txtphone"></p>
                        <svg class="icon" aria-hidden="true">
                            <use :xlink:href="stateicon"></use>
                        </svg>
                    </div>
                </div>
                <div class="item"><input placeholder="输入登录密码" class="full" v-model="password" type="password"/></div>
            </div>
            <!--验证码部分-->
            <!--<div class="inmn" style="margin-top: 2vw">-->
            <!--<div class="item2">-->
            <!--<div class="int"><input placeholder="请输入验证码" pattern="[0-9]*" type="number" v-model="code" maxlength="6" /></div>-->
            <!--<div class="r">-->
            <!--<p class="p4" :class="" @click="getCode">{{ codetxt }}</p>-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <div class="btn-db">
                <button-normal widthPro="200" heightPro="35" textBtn="登录" color="#fff" size="14"
                               @click.native="beforeLogin"></button-normal>
                <div class="line"></div>
                <button-normal-hollow
                        widthPro="200"
                        heightPro="35"
                        textBtn="注册"
                        color="#BF2071"
                        size="14"
                        @click.native="toResgister"
                ></button-normal-hollow>
                <div class="line-txt">
                    <div class="se"></div>
                    <p class="p1">或用其他账号登录</p>
                    <div class="se"></div>
                </div>
                <div class="btn-nav">
                    <div class="nav" @click="login(1)">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-weixin"></use>
                        </svg>
                        <p class="p1">微信</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import API from '@/request/api';
    import {Toast} from 'vant';
    import buttonNormal from '@/components/common/buttonNormal';
    import ButtonNormalHollow from '@/components/common/buttonNormalHollow';
    import {sysMixin, commonMixin} from '@/common/mixin';
    import {debounce} from '@/common/utils';
    import regular from '@/common/regular';

    export default {
        name: 'login',
        components: {ButtonNormalHollow, buttonNormal},
        mixins: [sysMixin, commonMixin],
        data() {
            return {
                phone: '',
                type: 1,
                password: '',
                statephone: false, //手机号是否不对，true为不正确
                txtphone: '', // 手机号校验文本
                stateicon: '#icon-dui', // 对好还是叉号
                isBack: true, //是否物理回退
                firstleave: true //是否首次离开
            };
        },
        computed: {},
        created() {
            this.$watch(
                'phone',
                debounce((newVal) => {
                    this.checkPhone();
                }, 100)
            );

            this._getSystemInfo();
        },
        watch: {},
        methods: {
            checkPhone() {
                //监听手机号来做一些现实上的处理
                if (!regular.REGEX_CHINA_MOBILE.test(this.phone)) {
                    this.txtphone = '手机号不正确';
                    this.stateicon = '#icon-cuo';
                    this.statephone = true;
                } else {
                    this.request.get(API.polyCheckPhone, {phone: this.phone}).then((res) => {
                        if (!res) {
                            //不存在帐号
                            this.statephone = true;
                            this.txtphone = '未注册';
                            this.stateicon = '#icon-cuo';
                        } else {
                            //存在帐号
                            this.statephone = true;
                            this.txtphone = '可以使用';
                            this.stateicon = '#icon-dui';
                        }
                        this.statephone = true;
                    });


                }
            },
            toResgister() {
                //去注册隐藏当前显示注册
                this.isBack = false;
                this.$router.push({
                    name: 'poly-register'
                });
            },
            //聚合帐号info
            _getPolyInfo() {
                return this.request
                    .get(API.polyInfo, {aid: this.aid})
                    .then((res) => {
                        this.$store.commit('setUserInfo', res);
                        //隐藏登录组件
                        this.$store.commit('loginShow', false);
                        //  更新tokenArray
                        let tokenArray = JSON.parse(localStorage.getItem('tokenArray'));
                        if (tokenArray) {
                            // 原来有就更新
                            tokenArray[this.system] = {token: this.token, userInfo: res};
                            this.$store.commit('setTokenArray', tokenArray);
                        } else {
                            // 没有就新建本地tokenArray
                            let tokenArrayFirst = {};
                            tokenArrayFirst[this.system] = {token: this.token, userInfo: res};
                            this.$store.commit('setTokenArray', tokenArrayFirst);
                        }
                        //聚合登录直接进入account页面
                        this.isBack = false;
                        this.$router.replace({
                            name: 'poly-account'
                        });
                    })
                    .catch((err) => {
                        console.log(err);
                        this.$toast.fail(err);
                    });
            },
            beforeLogin() {
                // 快捷登录和普通登录共用方法
                if (!this.phone) {
                    Toast('请先填写手机号');
                } else {
                    this.login(0);
                }
            },
            login(isquick = 0) {
                // 登录接口
                let data = {
                    phone: this.phone,
                    password: this.password,
                    isquick: isquick
                };
                if (isquick) {
                    data = {isquick: isquick};
                }

                if (this.tokenType == '2') { //临时
                    this.request
                        .post(API.polyLogin, data)
                        .then((res) => {
                            // 本地存token
                            this.$store.commit('setToken', res.token);
                            this.$store.commit('setTokenType', res.token_type || '1');
                            this.$store.commit('system', 9999);
                            // 获取userinfo
                            this.aid = res.aid;
                            this._getPolyInfo();
                        })
                        .catch((err) => {
                            this.$toast(err);
                        });
                } else {
                    //正式token 不请求 直接跳转
                    this._getPolyInfo();
                }

            },
            _getSystemInfo() {
                return this.request.get(API.message, {system: this.system}).then((res) => {
                    this.$store.commit('setSystemData', res);
                });
            }
        },
        // 导航离开该组件的对应路由时调用
        beforeRouteLeave(to, from, next) {
            if (this.firstleave) {
                this.firstleave = false;
                if (this.isBack) {
                    let lastSystem = JSON.parse(localStorage.getItem('lastSystem'));
                    next({
                        name: 'welcome',
                        query: {
                            system: lastSystem
                        }
                    });
                }
            }
            next();
        }
    };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '~assets/main.styl'
    .login {
        position relative
        box-sizing border-box
        height 100vh
        background #f5f5f5
        width 100vw
        .log {
            height 30vw
            flex-x(center)
            img {
                width vw(66)
            }
            .logi {
                height 12vw
                flex-y(space-between, flex-start)
                padding-left 3vw
            }
        }
        .inmn {
            flex-y()
            margin 0 vw(15)
            border-radius main-radius
            background grayF
            .item {
                width 100%
                height vw(55)
                flex-x()
                .l {
                    flex 1
                    text-align center
                }
                .r {
                    flex 4
                    padding-left 20vw
                    box-sizing border-box
                }
                .full {
                    flex 1
                    text-align center
                    height vw(25)
                    padding vw(10) 0
                }
                .fullp {
                    flex 1
                    text-align center
                    line-height vw(55)
                }
                .full1 {
                    flex 4
                    text-align left
                    height vw(25)
                    padding vw(10) 0 vw(10) vw(60)
                }
                .statecss {
                    position absolute
                    right vw(30)
                    flex-x()
                    .icon {
                        margin-left vw(15)
                        fill main-color
                    }
                    p {
                        word-vw(word14, main-color)
                    }
                }
            }
            .ste {
                border-bottom 1px solid gray5
            }
            .item2 {
                flex-x(space-between)
                height vw(55)
                flex-x()
                width 100%
                .int {
                    flex 4
                    flex-x()
                    padding-left vw(15)
                    input {
                        height vw(55)
                    }
                }
                .r {
                    flex 1
                    background main-color
                    border-radius 0 main-radius main-radius 0
                    height vw(55)
                    flex-x(center)
                }
            }
        }
        .txt {
            flex-x(space-between)
            padding 0 vw(15)
            margin-top 4vw
            p {
                line-height vw(28)
            }
        }
        .txt1 {
            flex-x(space-between)
            padding 0 vw(15)
            p {
                line-height vw(28)
            }
        }
        .btn-db {
            width 100vw
            margin-top vh(43)
        }
        .line-txt {
            flex-x()
            padding 0 vw(36)
            margin-top vw(24)
            .se {
                width vw(72)
                height 1px
                background #D8D8D8
            }
            .p1 {
                word-vw(11px, gray9)
            }
        }
        .btn-nav {
            flex-x(center)
            padding-top 4vw
            .nav {
                flex-y()
                .p1 {
                    word-vw(13px, gray3)
                    padding-top 2vw
                }
                .icon {
                    width vw(38)
                    height vw(38)
                }
            }
        }

        .close {
            fill gray3
            position absolute
            right vw(20)
            arrow()
            top vw(20)
        }
        .fullInput {
            height vw(50)
            line-height vw(50)
            border-bottom 1px solid #efefef
            display flex
            justify-content space-between
            width 100%
            .pic {
                fill main-color
                width vw(20)
                height vw(20)
            }
            input {
                width 70%
            }
        }
        input:
        :placeholder {
            color gray9
        }
        .agree {
            height vw(50)
            line-height vw(50)
            display: flex;
            align-items: center;
            position relative
            color gray9
            .circle {
                border 1px solid gray6
                border-radius 50%
                width vw(15)
                height vw(15)
                box-sizing border-box
                margin-right vw(15)
            }
            .select {
                width vw(16)
                height vw(16)
                position absolute
                fill main-color
            }
            span {
                color gray3
            }
        }
    }

    .sure {
        background-color main-color
        position relative
        width 100vw
        text-align center
        height vw(50)
        line-height vw(50)
        left 0
        color grayF
    }
</style>
